<template>
  <div>
    <dv-loading v-if="loading">Waiting...</dv-loading>
    <div class="topleft">
      <div style="display: flex">
        <div style="margin-top: 100px;margin-left: 70px">
          <div style="padding-bottom: 20px">
            <dv-input label="模型名称" :options="models1" v-model="model.name"></dv-input>
          </div>
          <div style="padding-bottom: 20px">
            <dv-input label="模型名" :options="models2" v-model="model.model"></dv-input>
          </div>
          <div style="padding-bottom: 20px">
            <dv-input label="模型包" :options="models3" v-model="model.modelpackage"></dv-input>
          </div>
          <div style="display: flex">
            <dv-button @click="inputParam()">输入模型参数</dv-button>
            <dv-button @click="comfirmmodel()">创建模型</dv-button>
          </div>
          <div>

          </div>
        </div>
        <div>
          <div>
            <el-dialog title="模型参数表单" :visible.sync="dialogFormVisible" :modal="false"
                       style="width: 2200px;margin-left: -130px;">
              <div style="height: 70px;font-size: 18px;text-align:center;line-height: 70px;color: white"
                   v-show="!dynamicFormList.length">请点击新增行来添加数据
              </div>
              <el-form :model="{}" :inline="true" v-show="dynamicFormList.length">
                <el-row v-for="(item, index) in dynamicFormList" :key="index">
                  <!--                  <el-col style="float:left;">-->
                  <el-form-item :label="'属性' + (index + 1)" :label-width="formLabelWidth">
                    <el-input v-model="item.name" autocomplete="off"></el-input>
                  </el-form-item>
                  <!--                  </el-col>-->
                  <!--                  <el-col>-->
                  <el-form-item :label="'值' + (index + 1)" :label-width="formLabelWidth">
                    <el-input v-model="item.value" autocomplete="off"></el-input>
                  </el-form-item>
                  <!--                  </el-col>-->
                  <!--                  <el-col>-->
                  <el-button type="danger" class="delete-button" @click="deleteRow(index)" style="margin-top: 30px;">
                    删除
                  </el-button>
                  <!--                  </el-col>-->
                </el-row>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addRow">新增行</el-button>
                <el-button type="primary" @click="confirmParams()">确 定</el-button>
              </div>
            </el-dialog>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import dvButton from "@/components/dv-button";
import dvListDecoration from "@/components/dv-list-decoration"
import dvInput from '@/components/dv-input'
import {getModelData, upLoadModel} from "@/api/model";

export default {
  name: "topleft",
  components: {dvListDecoration, dvButton, dvInput},
  data() {
    return {
      packagePrefix: "sklearn.",
      dynamicFormList: [], // 动态表单数据列表
      params: {},
      //展示表单参数的变量
      dialogTableVisible: false,
      dialogFormVisible: false,
      formLabelWidth: '100px',
      restaurants: [],
      state: '',
      loading: false,
      model: {
        name: "model01",
        model: "DecisionTreeClassifier",
        //模型所在的包
        modelpackage: "tree",
      },
      models1: [
        {label: 'model01', value: 'model01'},
        {label: 'model02', value: 'model02'},
        {label: 'model03', value: 'model03'}
      ],
      models2: [
        {label: 'DecisionTreeClassifier', value: 'DecisionTreeClassifier'},
        {label: 'KDTree', value: 'KDTree'},
        {label: 'SVC', value: 'SVC'}
      ],
      models3: [
        {label: 'tree', value: 'tree'},
        {label: 'neighbors', value: 'neighbors'},
        //怎么处理没有明白
        {label: 'svm', value: 'svm'}
      ],
    };
  }
  ,
  mounted() {
  },
  methods: {
    // todo 输入模型的参数
    confirmParams() {
      this.dialogFormVisible = false
      const dynamicFormObject = {};
      const dynamicFormList = this.dynamicFormList;
      for (let i = 0; i < dynamicFormList.length; i++) {
        const obj = dynamicFormList[i];
        const key = obj.name;
        dynamicFormObject[key] = parseInt(obj.value);
      }
      //将处理之后的值放到
      this.params = dynamicFormObject
      console.log(dynamicFormObject);
    },
    deleteRow(index) {
      this.dynamicFormList.splice(index, 1);
    },
    addRow() {
      this.dynamicFormList.push({name: '', value: ''});
    },
    inputParam() {
      this.dialogFormVisible = true
    },
    comfirmmodel() {
      if (this.model.name !== '' && this.model.model !== '' && this.model.modelpackage !== '') {
        this.$confirm(`你确定要创建这个${this.model.name}模型吗`, '模型选择', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true
          let formData = new FormData();
          formData.append("name", this.model.name);
          formData.append("model", this.model.model);
          formData.append("package", this.packagePrefix + this.model.modelpackage);
          formData.append("group", "white");
          //处理json格式化问题
          formData.append("param", JSON.stringify(this.params))
          upLoadModel(formData).then((res) => {
            console.log(res)
            var code = res.data.code
            if (code === '201') {
              this.$message.error('选择模型错误')
              return
            }
            this.loading = true
            this.$message({
              type: 'info',
              message: '创建成功!',
            });
            //获取模型文件
            getModelData().then(res => {
              let data = res.data.msg
              //将我们的数据绑定到data当中去了
              this.$bus.$emit('getModelData', data)
              this.loading = false
            })
          })
          this.loading = false
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消创建'
          });
        });
      } else {
        this.$message('请补全参数');
      }
    },
  }

}
</script>

<style scoped>
.topleft {
  height: 400px;
}

/deep/ .el-input__inner {
  color: white;
  border: 4px solid #00b3ff;
  height: 56px;
  width: 361px;
  background-color: #0a1c3b;
  font-size: 20px;
  margin-top: 20px;
}

/deep/ .el-dialog__footer {
  background: black;
}

/deep/ .el-dialog__body {
  background: black;

}

/deep/ .el-form-item__label {
  margin-top: 25px;
  font-size: 18px;
  color: white;
}
</style>
